

<template>
  <div class="detail">
    <div class="tablesB" v-if="dialogTitle == '出库详情'">
      <el-table :data="out_storeShow.drug_item" border>
        <el-table-column type="index" width="70" label="序号">
        </el-table-column>
        <template v-for="(item, index) in $baseBai['outManage']['detail']">
          <el-table-column
            :width="item.width"
            v-if="item.prop == 'store_infoName'"
            :prop="item.prop"
            :label="item.label"
            :key="index"
          >
            <template slot-scope="scope">
              <div>{{ out_storeShow.store_info.name }}</div>
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            :key="index + item"
          >
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div
      class="tablesB"
      v-if="dialogTitle == '出库新增' || dialogTitle == '出库修改'"
    >
      <div class="selects">
        <div v-if="dialogTitle == '出库修改'">
          <div>申请单号：</div>
          <div>
            <el-input v-model="out_storeShow.number" :disabled="true">
            </el-input>
          </div>
        </div>

        <div>
          <div>出库库房:</div>
          <div>
            <el-select @change="onchangeStore" v-model="out_storeShow.store_id" placeholder="库房">
              <el-option
                v-for="item in KuFangList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
           <div>
          <div>出库类型:</div>
          <div>
            <el-select v-model="out_storeShow.type" placeholder="库房">
              <el-option
                v-for="item in $baseBai['outManage']['type']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
         <div>
          <div>出库凭证:</div>
          <div>
            <el-input v-model="out_storeShow.into_proof" placeholder="请输入出库凭证">
            </el-input>
          </div>
        </div>
        
        <div>
          <div>供货单位:</div>
          <div>
            <el-input v-model="out_storeShow.supply_org" placeholder="请输出供货单位">
            </el-input>
          </div>
        </div>
        <div>
          <div>税务登记号:</div>
          <div>
            <el-input v-model="out_storeShow.tax_number" placeholder="请输入税务登记号">
            </el-input>
          </div>
        </div>
      
         
       
        
     
        <div>
          <div>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:&nbsp;&nbsp;</div>
          <div>
            <el-input v-model="out_storeShow.remark" placeholder="请输入备注">
            </el-input>
          </div>
        </div>
      </div>
      <div class="selectTables" v-if="out_storeShow.store_id">
        <div style="margin-right: 10px;width:100px">选择药品:</div>
        <el-popover placement="bottom-end" width="500px" trigger="focus">
          <el-input
            placeholder="选择药品"
            slot="reference"
            v-model="selectParams.keyword"
            @input="getDrugItem()"
          >
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>

          <el-table
            v-loading="threeSelectLoading"
            height="300"
            @current-change="xuanzeDataThree"
            highlight-current-row
            :data="selectData.selectData2"
            style="width: 100%"
          >
            <el-table-column type="index" width="70" label="序号">
            </el-table-column>
            <el-table-column label="药品名称" prop="drug_name">
            </el-table-column>
          
            <el-table-column label="规格" prop="specification" >
            </el-table-column>
            <el-table-column label="单位" prop="base_unit" >
            </el-table-column>
            <el-table-column label="批准文号" prop="drug_code">
            </el-table-column>
               <el-table-column label="库存数" prop="store_num" >
            </el-table-column>
               <el-table-column label="批号" prop="fill_no">
            </el-table-column>
               <el-table-column label="有效期" prop="useful_time">
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="selectParams.page"
            :page-size="selectParams.limit"
            @current-change="handlePagination"
            :total="selectParams.pageCount"
            layout="prev, pager, next"
          >
          </el-pagination>
        </el-popover>
      </div>
      <div v-if="out_storeShow.store_id">
        <el-table :data="tableData2" style="width: 100%">
          <template
            v-for="(item, index) in $baseBai['outManage']['updateList']"
          >
            <el-table-column
              v-if="item.prop == 'num'"
              :width="item.width"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-input-number
                    v-model="scope.row.num"
                    controls-position="right"
                    :min="1"
                   
                  ></el-input-number>
                </span>
              </template>
            </el-table-column>
           
       

           

          
            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'remark'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <span>
                    <el-input
                      v-model="scope.row.remark"
                      placeholder="备注"
                    ></el-input>
                  </span>
                </span>
              </template>
            </el-table-column>


            

            <el-table-column
              :width="item.width"
              v-else
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
            </el-table-column>
          </template>

          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData2)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="buts">
        <div>
          <el-button type="info" @click="thatF.Detail_Show = false"
            >取消</el-button
          >
        </div>
        <div><el-button class="butB_Add" @click="save">保存</el-button></div>
      </div>
    </div>
  </div>
</template>
<script>
let t;
import dialogTableUser from '../../components/dialogTableUser'
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {

      
      setVal: {
        apply_user: "apply_user_info",
        accept_user: "accept_user_info",
      },
      params: {
        number: "",
        remark: "",
        arrival_date: "",
      },
      selectParams: {
        keyword: "",
        page: 1,
        limit: 15,
        pageCount: 0,
      },
      selectData: {
        selectData2: [],
      },
      tableData2: [],
      threeSelectLoading: false,
    };
  },
    components: {
   dialogTableUser
  },
 
  mounted(){
    
       if (this.dialogTitle == "出库修改") {
          this.tableData2=this.out_storeShow.drug_item.map(v=>{
            return {
              drug_name:v.drug_info?v.drug_info.name:'',
              base_unit: v.drug_info?v.drug_info.base_unit:'',
              buy_price: v.buy_price,
              origin_factory:v.drug_info?v.drug_info.origin_factory:'',
              specification:v.drug_info?v.drug_info.specification:'',
              fill_no:v.fill_no,
              drug_id:v.drug_id,
              store_num_id:v.store_num_id,
              useful_time:v.useful_time,
              create_time:v.create_time,
              num: v.num,
              remark:v.remark,
                 }
          })
       }

       
    this.onchangeStore()
  },
  props: ["dialogTitle", "thatF"],
  methods: {
     onchangeStore(){
         if(this.out_storeShow.store_id){
            this.getDrugItem()
         }
    },
    save() {
    


      let d = {
        store_id: this.out_storeShow.store_id,//库房
        type:this.out_storeShow.type?parseInt(this.out_storeShow.type):'',//类型
       
        out_proof:this.out_storeShow.into_proof,//出库凭证
        tax_number:this.out_storeShow.tax_number,//供货单位
        supply_org:this.out_storeShow.supply_org,//税务号
        
         remark: this.out_storeShow.remark,  //备注
         drug_items:this.tableData2.map((v) => {
          return {
            drug_id: v.drug_id,
            num: v.num,
            fill_no:v.fill_no,
            store_num_id:v.store_num_id,
            useful_time:v.useful_time,
            buy_price:v.buy_price,//单价
            //create_time:v.create_time,//生产日期
            remark: v.remark,      
      
             
          };
        })
      }

    for( var key in d ){
        if(!d[key]){
          return this.$message.error('您还有未选择的选项')
        }
    }

    if(d.drug_items.length===0){
      return this.$message.error('请选择药品')
    }
     for (const v of d.drug_items) {
          
            for( var key in v){
                if(!v[key]){
                  return this.$message.error('药品里您还有未选择的选项')
                }
            }
     }


    
      // return
    
      if (this.dialogTitle == "出库修改") {
        d.id = this.out_storeShow.id;
      }

      this["_API"].getdrug_out_storeSave(d).then((res) => {
        if (res.code == 200) {
          this.thatF.Detail_Show = false;
          this.$message({
            message: res.message,
            type: "success",
          });
          setTimeout(() => {
            this.thatF.params.page = 1;
            this.thatF.getList();
          }, 500);
        }
      });
      
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handlePagination(e) {
      this.threeSelectLoading = true;
      this.selectParams.page = e;

      this.getDrugItem();
    },
    xuanzeDataThree(item) {
      if (this.tableData2.findIndex((res) => res.id == item.id) === -1) {
        this.tableData2 = this.tableData2.concat(item);
      }
    },
    getDrugItem() {
      if(!this.out_storeShow.store_id){
          return  this.$message.error('请些选择源库房');
        }
    
      let d = {
        keyword: this.selectParams.keyword,
        store_id:this.out_storeShow.store_id,
      };

      this["_API"].getdrug_claimSelect(d).then((res) => {
        if (res.code == 200) {
          this.selectData.selectData2 = res.data.map((v) => {
            return {
              ...v,
              num: 0,
              create_time:'',
              remark:'',
            };
          });





          this.selectParams.pageCount = res.data.count;
          this.threeSelectLoading = false;
        }
      });
    },
  },
  computed: {
    ...mapState({
      out_storeShow: (state) => state.storage.out_storeShow,
      KuFangList: (state) => state.dictBai.KuFangList,
    }),
  },
};
</script>
<style lang='scss' scoped>
.addUdetailpdate {
  padding: 0 5%;
}
/deep/ .el-dialog__body {
  height: 70vh;
  overflow: scroll;
}
/deep/ .selects {
  display: flex;
  flex-wrap: wrap;
  > div > div:nth-child(1) {
    text-align: justify;
    width: 100px;
   
    margin-right: 10px;
  }
  > div {
    margin-top: 20px;
    width: 25%;
    display: flex;
    align-items: center;
  }
  input{
    width: 200px;
  }
}
.selectTables {
  margin-top: 20px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}
.buts {
  display: flex;
  margin-top: 50px;
  justify-content: center;
  > div {
    margin-right: 20px;
  }
}
</style>